<template>
	<view class="utils-emoji-list-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="padding-bottom-30 flex align-center flex-wrap">
				<view class="image-item" v-for="(item,index) in emojiList" :key="index" @tap="addEmoji(item)">
					<image mode="widthFix" :src="emojiFrontUrl + item.url"></image>
				</view>
			</view>
		</view>
		<!-- 组件浮层 -->
		<view class="cn-layer">
			
		</view>
	</view>
</template>

<script>
	import emoji from "./emoji.js"
	export default {
		props: {
			// emoji图标前缀URL
			emojiFrontUrl: ''
		},
		data() {
			return {
				emojiList: emoji.list
			}
		},
		methods: {
			/**
			 * 添加表情
			 * @param {Object} item 表情元素
			 * @date 2022-09-20
			 */
			addEmoji(e) {
				this.$emit('emojiAdd', e)
				// this.inputValue += e.alt
			},

			/**
			 * 展示表情
			 * @param {Object} item 表情元素
			 * @date 2022-09-20
			 */
			// show() {
			// 	this.showPannel = !this.showPannel;
			// 	this.$emit('show')
			// },
			// 光标触发隐藏表情
			// foc() {
			// 	this.showPannel = false
			// 	this.$emit('foc')
			// },
			// handleEmotion(i) {
			// 	this.inputValue += i
			// },
		}
	}
</script>

<style>
	.cn-content {
		overflow: scroll;
		height: 520rpx;
	}

	.image-item {
		display: block;
		margin-top: 30rpx;
		width: 12.5vw;
		text-align: center;
	}

	.image-item image {
		width: 50rpx;
		height: 50rpx;
	}
</style>
